<style scoped lang="scss">
.moutx {
    width: 100%;
    height: 736px;
    background-color: #f7f7f7;
}

.first {
    margin-top: 10px;
    width: 100%;
    height: 120px;
    background-color: white;

    div {
        width: 100px;
        height: 100px;
        float: left;
        text-align: center;
        font-size: 28px;
        margin-left: 60px;

        p:nth-child(2) {
            font-size: 14px;
        }
    }
}

.senders {
    width: 100%;
    height: 119px;
    background-color: white;

    div {
        float: left;
        width: 90%;
        background-color: #f7f7f7;
        margin-left: 10px;
        font-size: 14px;
        line-height: 24px;
    }
}

.fourt {
    margin-top: 10px;
    width: 100%;
    height: 326px;
    background-color: white;

    div {
        span:nth-child(2) {
            margin-left: 218px;
        }
    }

}

.button {
    width: 100%;
    height: 84px;
    position: absolute;
    background-color: white;
    bottom: 0;

    button {
        width: 80%;
        height: 41px;
        margin-top: 10px;
        border: none;
        color: white;
        background-color: #39d167;
        margin-left: 35px;
    }
}
</style>

<template id="temp"> <!-- vue实例外创建 -->
    <div class="moutx">

        <div class="first">
            <div>
                <p>--</p>
                <p>体重(kg)</p>
            </div>
            <div>
                <p>--</p>
                <p>BMI</p>
            </div>

        </div>

        <div class="senders">
            <div>
                <p>还没有您的BMI记录</p>
                <p>通过智能设备上传或手动录入您的体重身高数据,看看健康</p>
                <p>顾问怎么说</p>
            </div>
        </div>

        <div class="fourt">
            <div>
                <span>最近7次记录</span>
                <span>查看更多记录></span>
            </div>

            <div>
                <div ref="main" style="width: 400px;height:300px;"></div>
            </div>
        </div>



        <div class="button">
            <button>手动导入</button>
        </div>
    </div>
</template>

<script setup lang="ts">

import * as echarts from 'echarts';
import { flat } from 'vant/lib/utils';
import { ref, onMounted } from 'vue'

const main = ref<HTMLElement>()

onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(main.value as HTMLElement);
    // 绘制图表
    myChart.setOption({
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: [500],
                type: 'line'
            }
        ]
    });
})

</script>